<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id='app'>
			<section id="todoapp">
				<header class="header">
					<h1>日课</h1>
					<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入" class="new-todo">
				</header>
				
				<section class="main">
					<ul class="todo-list">
						<li class="todo" v-for="(item,index) in list">
							<div class="view">
								<span class="index">{{ index+1 }}</span>
								<label>{{ item }}</label>
								<button class="destroy" @click="remove(index)"></button>
							</div>
						</li>
					</ul>
				</section>
				
				
				<footer class="footer">
					<span class="todo-count" v-if="list.length!=0"> 
					<strong>{{ list.length }}</strong> item left 
					</span>
					
					<button v-show="list.length!=0" class="clear-completed" @click="clear">
						Clear
					</button>
				</footer>
			</section>
			
			
			<footer class="info">
			</footer>
		</div>
		
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>	 
		var vm = new Vue({
				 el: "#todoapp",
				 data: {
					 list:["拉1","拉2","拉3"],
					 inputValue:"规则矩形固体空间移动工程师"
				 },
				 methods: {
					 add:function(){
						 this.list.push(this.inputValue);
					 },
					 remove:function(index){
						 console.log("删除");
						 console.log("index");
						 this.list.splice(index,1);
					 },
					 clear:function(){
						 this.list = [];
					 }
				 },
			 })
	    
		
		 </script>
	</body>
</html>